<template>

<div class="school">
    <div class="box-card">
 <!--       <div  class="title"  @click="toggleOpen">
            <span>学校概况</span>
            <i v-if="progress==='1'"><el-tag type="success">已完善</el-tag></i>
            <i v-if="progress==='0'"><el-tag type="danger">待完善</el-tag></i>
            <div class="head-right">
                <el-button type="success" @click="submit" v-if="!disabled">保存</el-button>
                <el-button type="primary" @click="handleEdit" v-if="disabled">编辑</el-button>
                <el-button type="warning" @click="handleCancel" v-if="!disabled">取消</el-button>

                <span class="toggle">
                    <i class="el-icon-arrow-up" v-if="open"></i>
                    <i class="el-icon-arrow-down"  v-else></i>
                </span>

            </div>
        </div>-->
        <item-header
                title="学校概况"
            :open="open"
            :progress="progress"
            :disabled="disabled"
            @submit="submit"
            @toggleOpen="toggleOpen"
            @changeDisabled="changeDisabled"
        />
        <div class="text item" v-if="open">
            <el-row :gutter="20">
                <el-col :span="2">

                        <div class="">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/common/upload"
                                    :show-file-list="false"
                                    :disabled="disabled"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">

                                <i v-else   class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <!--<span style="font-size:12px;" v-if="!disabled">点击上传标志</span>-->
                            <p style="margin-top:-4px;text-align: center;width:100px;line-height: 20px;">{{formUnit.unit_name}}</p>
                        </div>

                </el-col>
                <el-col :span="22">
                    <div class="">
                         <el-form :inline="true" :rules="rules" ref="form" :model="data.college_info" label-width="240px">
                        <el-form-item label="学校占地" prop="basic_param1">
                            <el-input v-model="data.college_info.basic_param1"  :disabled="disabled">
                                <span slot="suffix" class="" style="padding-right:10px;">亩</span>
                            </el-input>
                        </el-form-item> <br>
                        <el-form-item label="校区个数" prop="basic_param2">
                            <el-input v-model="data.college_info.basic_param2"  :disabled="disabled">
                                <span slot="suffix" class="" style="padding-right:10px;">个</span>
                            </el-input>

                        </el-form-item>
                        <br>
                        <el-form-item label="各校区名称" prop="basic_param3">
                            <el-input style="width:500px" type="textarea" placeholder="请输入各校区名称，并用分号隔开" v-model="data.college_info.basic_param3"  :disabled="disabled"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="科研实验室数量" prop="basic_param4">
                            <el-input placeholder="请输入房间数" v-model="data.college_info.basic_param4"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">个</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="在职教工人数" prop="basic_param5">
                            <el-input v-model="data.college_info.basic_param5"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">人</span>
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="教学实验室数量" prop="basic_param6">
                            <el-input placeholder="请输入房间数"   v-model="data.college_info.basic_param6"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">个</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="在校本科生人数" prop="basic_param7">
                            <el-input v-model="data.college_info.basic_param7"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">人</span>
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="仪器设备数量" prop="basic_param8">
                            <el-input v-model="data.college_info.basic_param8"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">台</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="在校研究生人数" prop="basic_param9">
                            <el-input v-model="data.college_info.basic_param9"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">人</span>
                            </el-input>
                        </el-form-item>

                        <br>
                        <el-form-item label="仪器设备资产总值" prop="basic_param10">
                            <el-input v-model="data.college_info.basic_param10"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">万元</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="涉及实验工作的师生总人数" prop="basic_param11">
                            <el-input v-model="data.college_info.basic_param11"  :disabled="disabled" >
                                <span slot="suffix" class="" style="padding-right:10px;">人</span>
                            </el-input>
                        </el-form-item>

                    </el-form>
                    </div>
                </el-col>

            </el-row>


        </div>
    </div>

</div>


</template>

<script>
    import itemHeader from './item-header'
    export default {
        components:{itemHeader},
        name: "item1",
        props:['formUnit', 'is_disabled','expend','imageUrl'],

        computed:{
            progress(){

                return this.data.college_info.progress[this.index]
            }
        },
        watch: {
            formUnit(val) {
                this.data = this.formUnit;
            }
        },
        data(){
            return {
                disabled:this.is_disabled,
                // data:this.formUnit,
                data:JSON.parse(JSON.stringify(this.formUnit)),
                complete:false,
                open:this.expend,

                index:1,
                rules: {
                    "basic_param1": [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param2: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param3: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param4: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param5: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param6: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param7: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param8: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param9: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param10: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ],
                    basic_param11: [
                        {required: true, message: '请填写此项',trigger: 'blur'}
                    ]
                },
            }
        },
        methods:{

            toggleOpen(){
                this.open = !this.open
            },
            beforeAvatarUpload(file){
                this.$emit('beforeAvatarUpload',file)
            },
            handleAvatarSuccess(res, file) {
                this.$emit('handleAvatarSuccess',res, file)
            },

            changeDisabled(val){
                if (val){
                    this.data =  JSON.parse(JSON.stringify(this.formUnit))
                }

                this.disabled = val
            },
            submit(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation()
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        this.$emit('itemSave',this.data,this.index)
                        this.disabled = true
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
    .toggle{
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        cursor: pointer;
    }
    .title:hover{
        background: #e6e6e6;

    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right:20px;
        top:1px;
    }
</style>
